<template>
<div class="grade-page">
    <div class="poetyList-body">
		<div class="potryImg">
			<div class="title">{{ scenceInfo.scenicName || '' }}</div>
			<img :src="scenceInfo.scenicImages ? scenceInfo.scenicImages :''" :onerror="headError"/>
      <div class="linear"></div>
		</div>
     	<!-- 未上传 -->
		<div  class="upload-box">
			<div v-if="!isUpload">
				<div class="upload" v-if="userUse !=0">
					<UploadImg ref="upload"  @uploadImg="uploadImg" />
				</div>
				<div class="bgImg"></div>
			</div>
		</div>
     	 <!-- 已上传 -->
		<div class="picture" v-if="isUpload">
			<img
				:src="imgs"
				class="picImg"
			/>
			<div class="upload"  v-if="userUse == '-1' || userUse == '2'" >
				<UploadImg ref="upload"  @uploadImg="uploadImg" />
      </div>
			<div class="picImgBg" ></div>
			<!-- 审核未通过-->
			<div v-if="userUse =='2' && isReapeat"  class="passFlag" ></div>
		</div>
		<div class="tip_box" v-if=" userUse != 1">
			<div class="tips">
				<div class="iconDot"></div>上传你在这里游览的照片
			</div>
			<div class="tips">
				<div class="iconDot"></div>老师审核通过之后会有积分奖励哦
			</div>
		</div>
		<div class="stuInfo" v-if="userUse == 1">
        	<p class="student">+500积分</p>
			<div class="time" v-if="scenceInfo.teacherPraise ==1">
				<div>{{  scenceInfo.teacherName ? scenceInfo.teacherName :''}}老师已点赞</div>
				<div class="agreeIcon"></div>
			</div>
		</div>
		<div class="teaInfo" v-if="userUse == 2">
			<div class="title">教师评语：</div>
			<div class="commentContent">{{  scenceInfo.teacherContents }}</div>
		</div>
		<div class="btn_encourage"  v-if="(isUpload &&  userUse == -1) ||  userUse == 2">
			<div class="btn btn_c" @click="deleteImg"  v-if="(uploadSucc && isUpload) || isReapeat">删 除</div>
			<div class="btn btn_c" @click="uploadSignIn" v-if="isUpload && !uploadSucc && !isReapeat">上 传</div>
		</div>
		<!-- 打卡成功 -->
		<div class="btn_encourage" v-if="userUse == 0">
          <div class="btn btn_c">审核中</div>
    </div>
    </div>
    <!-- 弹窗 -->
      <div class="mask" v-if="mask" @click="closeMask"></div>
      <transition name="tips">
        <div class="layermain" v-if="uploadSucc && mask">
          <div class="layer">
            <div class="con">
              <h3>上传成功</h3>
              <p class="u-tips" slot="tips">老师审核通过之后会有积分奖励哦</p>
              <div class="btnbox">
                <div class="sure" @click="closeMask"></div>
              </div>
            </div>
          </div>
        </div>
      </transition>
</div>
</template>

<script>
import * as api from "@/api/index";
export default {
	data() {
		return {
			userInfo:JSON.parse(localStorage.getItem("userInfo")),
			scenicUserId:'', //景点打卡id
      scenceInfo:{},
      headError: this.$store.state.headError,
			userUse:this.$route.query.userUse,
			isReapeat:false, //审核不通过 再次提交
			isUpload: false, //是否上传
			uploadSucc: false, //是否打卡
			mask: false,
			imgs: '' //学生打卡的图片
		};
	},
	mounted() {
		this.getScenceInfo()
		this.$nextTick(()=>{
			if(this.userUse != -1){
				this.isUpload = true
			
			}
			if(this.userUse == 2){  
				this.isUpload = true
				this.uploadSucc = false
				this.isReapeat = true
			}
		
		})
	},
	watch: {
			mask(val) {
			this.$store.dispatch("setMaskAct", val);
			}
	},
  methods: {
	//获取诗词信息 
	async getScenceInfo(){
		let data ={
			userId :this.userInfo.userId,
			scenicId :this.$route.query.scenicId,
			futureId:this.userInfo.futureId,
		}
		var res=await api.getScenicInfoById(data)
		if(res.resultCode ==1){
			this.scenceInfo = res.value
			if(this.$route.query.scenicUserId){
				this.scenicUserId = this.$route.query.scenicUserId
				let data ={
				userId :this.userInfo.userId,
				scenicUserId : this.scenicUserId,
				futureId:this.userInfo.futureId,
				}
				var res=await api.getByScenicUserId(data)
				if(res.resultCode ==1){
					this.imgs = res.value.userImages 
					this.scenceInfo.teacherPraise = res.value.teacherPraise
					this.scenceInfo.teacherContents =res.value.teacherContents
					this.scenceInfo.teacherName =res.value.teacherName
				}
			}
		}
	},
	//打卡
	async uploadSignIn(){
		let data={
			futureId: this.userInfo.futureId,
			scenicId: this.$route.query.scenicId,
			userId:this.userInfo.userId,
			userImages:this.imgs,
			classId:this.userInfo.classList && this.userInfo.classList[0].classId
		}
		var res=await api.addScenicUser(data)
		console.log('res',res)
		if(res.resultCode == 1){
			this.uploadSucc =true
			this.isUpload = true
			this.scenicUserId =res.value.scenicUserId
			this.mask=true
		}else{
			this.$LayerTips({
				content:res.resultMessage,
				time:1500,
			});
		}
	},
	//上传图片成功后的回调
    uploadImg(data) {
        console.log('data',data)
        this.isUpload =true
        this.imgs =data
	},
	async deleteImg() {
		let data={
			scenicUserId :this.scenicUserId
		}
		var res=await api.deleteScenicUser(data)
		if(res.resultCode == 1){
			this.isUpload = false
			this.uploadSucc =false
			this.isReapeat =false
			this.imgs =''
		}else{
		}
	
    },
    closeMask() {
      this.mask = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.layer {
  height: auto;
  .text-box {
    width: 5.5rem;
    height: 2.2rem;
    background-color: #f3f5f7;
    margin: 0.3rem auto;
    border-radius: 0.3rem;
    padding: 0.4rem;
    font-size: 0.32rem;
    color: #333333;
    resize: none;
  }
}
.sure {
  background: url(~@/assets/img/teacher/sureBtn.png) no-repeat;
  background-size: 100%;
  width: 3.2rem;
  height: 0.8rem;
  margin: 0 auto;
}
.grade-page {
  .poetyList-body {
    // padding:.3rem .4rem;
    min-height: 100vh;
    height: auto;
    background: url(~@/assets/img/teacher/unencourage.png) no-repeat bottom;
    background-size: cover;
    padding-bottom: 3rem;

    .potryImg {
      width: 100%;
      height: 6rem;
      .linear{
          position: absolute;
          top: 0;
          width: 100%;
          height: 6.5rem;
          background:-webkit-linear-gradient(#d4d0d02b 30%,#c5c1c13b 50%, #fff 100%);
      }
      // background-color: red;
      .title {
        width: auto;
        min-width: 2.1rem;
        line-height: 0.5rem;
        font-size: 0.44rem;
        color: #ffffff;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        left: 0.4rem;
        right: 0.4rem;
        top: 0.2rem;
        padding: 0.1rem 0.2rem;
        border-radius: 0.35rem;
      }
    }
    .btn_encourage {
      width: 100%;
      display: flex;
      margin-top: 1.2rem;
      align-items: center;
      padding: 0 0.3rem;
      justify-content: space-between;
      // position: absolute;
      top: 10rem;
      padding: 0 0.6rem;
      .hasBtn {
        width: 3rem;
        height: 0.8rem;
        line-height: 0.8rem;
        color: #05b3b6;
        font-size: 0.4rem;
        text-align: center;
        margin: 0 auto;
        border-radius: 0.4rem;
        background: rgba(127, 255, 0, 0);
        border: 0.01rem solid #05b3b6;
      }
      .btn {
        width: 2.6rem;
        height: 0.8rem;
        line-height: 0.8rem;
        text-align: center;
        font-size: 0.4rem;
        color: #ffffff;
        border-radius: 0.4rem;
        text-align: center;
      }
    //   .btn_l {
    //     background-color: #05b3b6;
	  // }
	  .btn_c{
		  background-color: #05b3b6;
		  margin: 0 auto;
	  }
	  .upload_img{
			opacity: 0;
			position: absolute;
			width: 2.6rem;
	  }
    }
    .stuInfo {
      margin-top: 3.6rem;
      text-align: center;
      .student {
        font-size: 0.42rem;
        color: #05b3b6;
        line-height: 0.5rem;
      }
      .time {
          font-size: 0.32rem;
          color: #c5c5c5;
          line-height: 0.4rem;
          display: flex;
          margin: 0.4rem auto;
          align-items: center;
          justify-content: center;
        .agreeIcon {
          background: url(~@/assets/img/teacher/hasAggre.png) no-repeat bottom;
          background-size: cover;
          width: 0.6rem;
          height: .5rem;
          display: inline-block;
          margin-left: 0.2rem;
        }
      }
    }
    .teaInfo {
      width: 6.6rem;
      height: 2.6rem;
      background-color: #f3f5f7;
      border-radius: 0.3rem;
	    margin: .4rem auto 0 auto;
      padding: 0.3rem 0.5rem;
      .title {
        font-size: 0.34rem;
        color: #333333;
        margin-bottom: 0.2rem;
      }
      .commentContent {
        font-size: 0.32rem;
        color: #333333;
        line-height: 0.34rem;
      }
    }
    .upload /deep/{
		width: 6.4rem;
		height: 3.7rem;
		position: absolute;
		top: 0rem;
		z-index: 1000;
		opacity: 0;
        .upload_img{
           input{
            width: 6.7rem;
            height: 3.8rem;
          }
        }
      }
    .upload-box {
      position: absolute;
      top: 4.6rem;
      left: 0.4rem;
      input{
        width: 6.7rem;
        height: 3.8rem;
      }
	.bgImg{
		width: 6.7rem;
		height: 3.8rem;
		background: url(~@/assets/img/student/uploadPic.png) no-repeat;
		background-size: cover;
	}
      .upload {
        position: absolute;
        opacity: 0;
        width: 100%;
        height: 3.8rem;
      }
    }
    .picture {
      position: absolute;
      width: 6.6rem; height: 3.9rem;
      top: 4.6rem;
      left: 0.4rem;
      .picImg {
        width: 6.4rem;
        height: 3.4rem;
        display: block;
        position: absolute;
        left: 0.2rem;
        top: 0.2rem;
      }
      .picImgBg {
        position: absolute;
        width: 6.8rem;
        height: 3.9rem;
        top: 0;
        background: url(~@/assets/img/teacher/picBg.png) no-repeat;
        background-size: cover;
      }
      .passFlag {
        background: url(~@/assets/img/student/unPass.png) no-repeat;
        background-size: cover;
        position: absolute;
        top: 1.2rem;
        width: 2.8rem;
        height: 1.6rem;
        left: 3.3rem;
      }
      .marSty{
        margin-top: 4rem;
      }
    }
    .upload-box:after {
      content: "";
      //  height: 4.1rem;
      clear: both;
      overflow: hidden;
      display: block;
      visibility: hidden;
    }
    .tip_box{
      margin-top: 2.9rem;
      margin-left: .4rem;
    }
    .tips {
      color: #c5c5c5;
      font-size: 0.32rem;
      margin-top: 0.2rem;
      display: flex;
      align-items: center;
      .iconDot {
        width: 0.1rem;
        height: 0.1rem;
        border-radius: 0.1rem;
        background-color: #bfe6b8;
        display: inline-block;
        margin-right: 0.1rem;
      }
      // text-align: center
    }
  }
}
</style>